<template>
  <div id="majorList" class="df" style="align-items: normal">
    <div style="flex: 1">
      <div
        id="SearchInput"
        class="df"
        :style="{
          top: majorType == 1 ? '51px' : majorType == 2 ? '133px' : '92px',
        }"
      >
        <div style="width: 100px" v-if="majorType != 3">
          共
          <span style="margin: 0 5px; color: #409eff">{{
            highlightCount || majorsList.allCount
          }}</span>
          条
        </div>
        <div class="search-box">
          <el-popover
            placement="bottom-start"
            trigger="click"
            :visible="popperVis"
            popper-class="popoverStyle"
          >
            <template #reference>
              <el-input
                @keyup.enter="handleEnter"
                @input="handleIptChange"
                size="large"
                clearable
                :prefix-icon="Search"
                v-model="searchvalue"
                style="width: 300px"
                placeholder="请输入内容"
              >
                <template #suffix>
                  <!-- <span v-if="validElements.length > 0"
                    >{{
                      majorType == 1 || majorType == 2
                        ? currentIndex
                        : currentIndex - 1
                    }}/{{
                      majorType != 2
                        ? validElements.length - 1
                        : validElements.length
                    }}</span
                  > -->

                  <span v-if="validElements.length > 0"
                    >{{ currentIndex }}/{{ validElements.length }}</span
                  >

                  <!-- <el-icon class="el-input__icon"><calendar /></el-icon> -->
                </template>
                <!-- <template #append>
                  <el-button size="large">搜索</el-button>
                </template> -->
              </el-input>
            </template>
          </el-popover>
        </div>
      </div>
      <div
        v-show="majorType == 1 || majorType == 2"
        class="container"
        ref="containerRef"
        v-for="(major, index) in majorsList"
        :key="major.code"
      >
        <div class="df" style="justify-content: space-between">
          <h3 class="list-title df">
            <div class="left-bar"></div>
            <div style="margin-right: 5px" :id="index">
              <h1
                id="title"
                v-html="handleIptChange(major.name)"
                style="font-size: 22px"
              ></h1>
              <!-- <span v-html="handleIptChange(major.name)" ></span> -->
            </div>
            <span>({{ major.code }})</span>
          </h3>
          <div class="f14" style="color: #999">
            {{ major.childCount }}个专业类，{{ major.count }}个{{
              majorType == 1 ? '本科' : '专科'
            }}专业
          </div>
        </div>

        <div class="left-title-box">
          <div
            class="left-title df curr"
            style="align-items: self-start"
            v-for="majorChil in major.majors"
            :key="majorChil.code"
          >
            <div
              class="df item-title"
              style="width: 300px"
              @click="handleMajorDet(majorChil, '1')"
            >
              <div style="margin-right: 5px">
                <div v-html="handleIptChange(majorChil.name)"></div>
              </div>
              <div>({{ majorChil.code }})</div>
            </div>

            <div class="df f14" style="flex-wrap: wrap; flex: 1">
              <div
                class="item-box"
                style="width: 140px"
                v-for="grandson in majorChil.majors"
                :key="grandson.code"
                @click="handleMajorDet(grandson, '2')"
              >
                <div
                  v-html="handleIptChange(grandson.name)"
                  ref="highlightElement"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="majorType == 3" v-for="item in majorsList" :key="item.code">
        <div class="df" style="justify-content: space-between">
          <h3 class="list-title df">
            <div class="left-bar"></div>
            <div style="margin-right: 5px">
              <h1
                id="jortitle"
                v-html="handleIptChange(item.name)"
                style="font-size: 22px"
              ></h1>
            </div>
            <span>({{ item.code }})</span>
          </h3>
        </div>

        <div class="left-title-box">
          <div
            class="left-title df curr"
            style="align-items: self-start"
            v-for="children in item.children"
            :key="children.code"
          >
            <div
              class="df item-title"
              style="width: 300px"
              @click="handleJorDet(children, '1')"
            >
              <div style="margin-right: 5px">
                <div v-html="handleIptChange(children.name)"></div>
              </div>
              <div>({{ children.code }})</div>
            </div>

            <div class="df f14" style="flex-wrap: wrap; flex: 1">
              <div
                class="item-box"
                style="width: 140px"
                v-for="grandson in children.children"
                :key="grandson.code"
                @click="handleJorDet(grandson, '2')"
              >
                <div
                  v-html="handleIptChange(grandson.name)"
                  ref="highlightElement"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div style="margin: 15px 0 0 40px">
      <hotList :hostDataList="hostDataList" />
    </div> -->
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
const popperVis = ref(false);
const searchvalue = ref('');
const containerRef = ref(null);
const emits = defineEmits([
  'handleScroll',
  'handleListScroll',
  'handleOpenDet',
  'handleJorDetails',
]);
const props = defineProps({
  majorsList: {
    type: Array,
    required: true,
  },
  majorType: {
    type: String,
    default: '3',
  },
});
const subTop = ref(0);

const handleMajorDet = (item, type) => {
  emits('handleOpenDet', item, type);
};
const handleJorDet = (grandson, type) => {
  emits('handleJorDetails', grandson, type);
};

const handleClearCurrentIndex = () => {
  currentIndex.value = 0;
  validElements.value = [];
};
let currentIndex = ref(0);
const validElements = ref([]);
// 有时候DOM会多出来一个offsetTop为0的元素  这里过滤掉这个为0的元素 否则会有问题
const handleEnter = () => {
  validElements.value = document.querySelectorAll('.spanHighlight');
  if (validElements.value.length > 0) {
    validElements.value = Array.from(validElements.value).filter(
      (element) => element.offsetTop !== 0
    );
    if (validElements.value.length > 0) {
      currentIndex.value = currentIndex.value % validElements.value.length;
      if (currentIndex.value > 0) {
        validElements.value[currentIndex.value - 1].classList.remove(
          'highlightBackGround'
        ); // 移除前一个高亮元素的背景色
      } else {
        validElements.value[validElements.value.length - 1].classList.remove(
          'highlightBackGround'
        ); // 移除前一个高亮元素的背景色
      }
      const targetElement = validElements.value[currentIndex.value];
      targetElement.classList.add('highlightBackGround'); // 添加背景颜色
      if (props.majorType == 1) {
        subTop.value = 250;
      } else if (props.majorType == 2) {
        subTop.value = 500;
      } else {
        subTop.value = 280;
      }
      emits('handleScroll', targetElement.offsetTop);
      currentIndex.value++; // 更新索引，准备下次跳转
    }
  }
};
const highlightCount = computed(() => {
  let count = 0;
  if (searchvalue.value) {
    const reg = new RegExp('(' + searchvalue.value + ')', 'g');
    props.majorsList.forEach((major) => {
      count += (major.name.match(reg) || []).length;
      major.majors.forEach((majorChil) => {
        count += (majorChil.name.match(reg) || []).length;
        majorChil.majors.forEach((grandson) => {
          count += (grandson.name.match(reg) || []).length;
        });
      });
    });
  }
  return count;
});
const handleIptChange = (val) => {
  let text = val; // 初始状态下设为普通文本
  if (searchvalue.value) {
    var reg = new RegExp('(' + searchvalue.value + ')', 'g');
    text = val.replace(reg, (match) => {
      return `<span ref="spanRef"  id="spanHighlight" class="spanHighlight" style='color:#409eff ;font-weight:bolder'>${match}</span>`;
    });
  }
  if (!!searchvalue.value) {
  } else {
    handleClearCurrentIndex();
  }
  return text;
};
const handleClearIptVal = () => {
  searchvalue.value = '';
};
const titleDOM = ref([]);
const handleTitleNav = (index) => {
  if (props.majorType == 1) {
    subTop.value = 250;
  } else {
    subTop.value = 340;
  }
  titleDOM.value = document.querySelectorAll('#title');
  emits('handleListScroll', titleDOM.value[index].offsetTop);
};
const jorLibraryDOM = ref('');
const handleJorLisScroll = (index) => {
  jorLibraryDOM.value = document.querySelectorAll('#jortitle');
  emits('handleListScroll', jorLibraryDOM.value[index].offsetTop);
};

defineExpose({
  handleClearIptVal,
  handleTitleNav,
  handleJorLisScroll,
  handleClearCurrentIndex,
});
</script>
<style scope lang="scss">
#majorList {
  flex: 1;
  .item-box {
    margin-bottom: 15px;
    margin-right: 46px;
    &:hover {
      color: #409eff;
    }
  }
  .list-title {
    margin-top: 30px;
    padding-bottom: 8px;
    // border-bottom: 1px solid #ddd;
    .left-bar {
      width: 3px;
      height: 25px;
      margin-right: 10px;
      background: #409eff;
    }
  }
  .left-title-box {
    .left-title {
      border-top: 1px solid #ddd;
      // padding: 10px 0;
      padding: 20px 0;
      .item-title {
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
#SearchInput {
  position: sticky;
  // top: 51px;
  left: 0;
  background: #fff;
  margin-top: 20px;
}
.el-input-group__append {
  width: 70px;
  background: #409eff !important;
  color: #fff;
}

.highlightBackGround {
  background: #409eff;
  color: #fff !important;
}
</style>
<style lang="scss">
.el-popover.popoverStyle {
  padding: 0 0 !important;
  // left: 350px !important;
}
</style>
